@use './element-plus';
@use './card';
@use './marked';
@use './vars';

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  font-family:
    'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial,
    sans-serif;
}

.body-container {
  //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  min-height: 160px;
  background: hsl(var(--card));
  border-radius: 4px;
  box-shadow:
    0 2px 8px 0 rgb(0 0 0 / 12%),
    0 0 6px rgb(0 0 0 / 4%);
}

.list-left-tree {
  padding: 15px 10px 40px;
  border-radius: 4px 0 0 4px;

  .el-tree-node__content {
    @apply h-36px;
  }

  &.one-level {
    padding: 10px 10px 40px;

    .el-tree-node__expand-icon {
      display: none;
    }

    .custom-tree-node {
      padding-left: 10px;
    }
  }

  .custom-tree-node {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;

    .count {
      float: right;
      padding: 1px 10px 0 0;
      font-size: 13px;
      color: #909399;
    }
  }
}

.list-table-th {
  // background: #f4f7fa !important;
}

.list-header-options {
  @apply flex-y-center py-15px pr-15px pl-12px mx-0 flex justify-between py-0;

  .el-button {
    @apply my-15px ml-10px;
  }

  .el-link {
    @apply mx-10px;
  }
}

.page-header {
  display: flex;
  padding: 0 0 20px;
  color: #303133;

  .title {
    display: inline;
    font-size: 20px;
  }

  .back {
    position: relative;
    display: flex;
    margin-right: 40px;
    cursor: pointer;

    &::before {
      position: absolute;
      top: 50%;
      right: -20px;
      width: 1px;
      height: 25px;
      content: '';
      background-color: #dcdfe6;
      transform: translateY(-50%);
    }

    .return {
      margin-bottom: 0;
    }
  }
}

.imager-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--el-text-color-secondary);
  background: var(--el-fill-color-light);
}

.router-link {
  color: #606266;
  text-decoration: none;

  &:hover {
    color: var(--primary-color);
  }

  .color-info {
    margin-right: 4px;
    color: #909399;
  }
}

.dark {
  .router-link {
    color: var(--el-text-color-primary);
  }
}
